<template>
	<el-tooltip :visible="state.capsLockVisible" effect="light" content="大写锁定已打开" placement="top">
		<el-form ref="ruleFormRef" :model="state.ruleForm" size="large" :rules="state.rules" class="login-content-form">
			<el-form-item class="login-animation1" prop="yuanQuId">
				<yuanQuSelect v-model="state.ruleForm.yuanQuId" placeholder="选择院区"> </yuanQuSelect>
			</el-form-item>
			<el-form-item class="login-animation1" prop="zhanDian">
				<zhanDianSelect v-model="state.ruleForm.zhanDian" placeholder="选择站点"></zhanDianSelect>
			</el-form-item>
			<el-form-item class="login-animation1" prop="jiuZhenLeiXing" v-show="needKeShi" :required="needKeShi">
				<el-radio-group v-model="state.ruleForm.jiuZhenLeiXing">
					<el-radio value="住院" border>住院</el-radio>
					<el-radio value="门诊" border>门诊</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item class="login-animation1" prop="keShi" v-show="needKeShi" :required="needKeShi">
				<keShiSelect v-model="state.ruleForm.keShi" :pid="state.ruleForm.yuanQuId"
					:orgType="state.ruleForm.jiuZhenLeiXing" placeholder="选择科室">
				</keShiSelect>
			</el-form-item>

			<el-form-item class="login-animation1" prop="account">
				<el-input ref="accountRef" text placeholder="请输入账号" v-model="state.ruleForm.account" clearable
					autocomplete="off" @keyup.enter.native="handleSignIn">
					<template #prefix>
						<el-icon>
							<ele-User />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item class="login-animation2" prop="password">
				<el-input ref="passwordRef" :type="state.isShowPassword ? 'text' : 'password'" placeholder="请输入密码"
					v-model="state.ruleForm.password" autocomplete="off" @keyup.enter.native="handleSignIn">
					<template #prefix>
						<el-icon>
							<ele-Unlock />
						</el-icon>
					</template>
					<template #suffix>
						<i class="iconfont el-input__icon login-content-password"
							:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
							@click="state.isShowPassword = !state.isShowPassword">
						</i>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item class="login-animation3" prop="captcha" v-if="state.captchaEnabled">
				<el-col :span="15">
					<el-input ref="codeRef" text maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')"
						v-model="state.ruleForm.code" clearable autocomplete="off" @keyup.enter.native="handleSignIn">
						<template #prefix>
							<el-icon>
								<ele-Position />
							</el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="1"></el-col>
				<el-col :span="8">
					<div :class="[state.expirySeconds > 0 ? 'login-content-code' : 'login-content-code-expired']"
						@click="getCaptcha">
						<img class="login-content-code-img" width="130px" height="38px" :src="state.captchaImage"
							style="cursor: pointer" />
					</div>
				</el-col>
			</el-form-item>
			<el-form-item class="login-animation4">
				<el-button type="primary" class="login-content-submit" round v-waves @click="handleSignIn"
					:loading="state.loading.signIn">
					<span>{{ $t('message.account.accountBtnText') }}</span>
				</el-button>
			</el-form-item>
			<div class="font12 mt30 login-animation4 login-msg">{{ $t('btms.login.msgText') }}</div>
			<!-- <el-button type="primary" round v-waves @click="weixinSignIn" :loading="state.loading.signIn"></el-button> -->
		</el-form>
	</el-tooltip>
	<div class="dialog-header">
		<el-dialog v-model="state.rotateVerifyVisible" :show-close="false">
			<DragVerifyImgRotate ref="dragRef" :imgsrc="state.rotateVerifyImg" v-model:isPassing="state.isPassRotate"
				text="请按住滑块拖动" successText="验证通过" handlerIcon="fa fa-angle-double-right"
				successIcon="fa fa-hand-peace-o" @passcallback="passRotateVerify" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="loginAccount">
import { reactive, computed, ref, onMounted, defineAsyncComponent, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, InputInstance } from 'element-plus';
import { accessTokenKey, clearTokens, feature, getAPI } from '/@/utils/axios-utils';
import { useThemeConfig } from '/@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { SysAuthApi } from '/@/api-services/api';
import { getLoginInfoFromStore } from '/@/stores/baseInfo';
import yuanQuSelect from './yuanQuSelect.vue';
import keShiSelect from './keShiSelect.vue';
import zhanDianSelect from './zhanDianSelect.vue';
import { doLogin, saveTokenAndInitRoutes } from './accountScript';
import { initOrgList } from '/@/stores/baseInfo/';
import { enumCode } from '/@/const';
// 旋转图片滑块组件
// import verifyImg from '/@/assets/logo-mini.svg';
const DragVerifyImgRotate = defineAsyncComponent(() => import('/@/components/dragVerify/dragVerifyImgRotate.vue'));

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

const route = useRoute();
const router = useRouter();

const ruleFormRef = ref();
const accountRef = ref<InputInstance>();
const passwordRef = ref<InputInstance>();
const codeRef = ref<InputInstance>();

const dragRef: any = ref(null);

const state = reactive({
	isShowPassword: false,
	ruleForm: {
		zhanDian: '输血科', // 这里保存的是枚举值的logic
		jiuZhenLeiXing: '住院', // 住院 , 门诊
		yuanQuId: undefined as number | undefined,
		keShi: undefined as number | undefined,
		account: "",
		password: '',
		code: '',
		codeId: 0,
	},
	rules: {
		jiuZhenLeiXing: [{ required: true, message: '住院类型必填', trigger: 'blur' }],
		zhanDian: [{ required: true, message: '站点必填', trigger: 'blur' }],
		yuanQuId: [{ required: true, message: '院区必填', trigger: 'blur' }],
		keShi: [{ required: true, message: '科室必填', trigger: 'blur' }],
		account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
		password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	},
	loading: {
		signIn: false,
	},
	captchaImage: '',
	rotateVerifyVisible: false,
	// rotateVerifyImg: verifyImg,
	rotateVerifyImg: themeConfig.value.logoUrl,
	secondVerEnabled: false,
	captchaEnabled: false,
	isPassRotate: false,
	capsLockVisible: false,
	expirySeconds: 60, // 验证码过期时间
});

//是否需要显示科室
const needKeShi = computed((): boolean => {
	return [enumCode.ZhanDian.医生站, enumCode.ZhanDian.护士站, enumCode.ZhanDian.手麻].includes(state.ruleForm.zhanDian);
})

// 验证码过期计时器
let timer: any = null;

// 页面初始化
onMounted(async () => {
	await initOrgList(); //初始化

	// 若URL带有Token参数（第三方登录）
	var accessToken = route.query.token;
	if (accessToken != null && accessToken != undefined) {
		await saveTokenAndInitRoutes(state.ruleForm, accessToken, route);
	}

	// 获取登录配置
	state.secondVerEnabled = themeConfig.value.secondVer ?? true;
	state.captchaEnabled = themeConfig.value.captcha ?? true;

	// 获取验证码
	getCaptcha();

	// 注册验证码过期计时器
	if (state.captchaEnabled) {
		timer = setInterval(() => {
			if (state.expirySeconds > 0) state.expirySeconds -= 1;
		}, 1000);
	}

	// 检测大小写按键/CapsLK
	document.addEventListener('keyup', handleKeyPress);

	// 获取登录表单缓存, 设置登录界面默认值
	let loginInfo = getLoginInfoFromStore();
	state.ruleForm.yuanQuId = loginInfo.yuanQuId;
	state.ruleForm.zhanDian = loginInfo.zhanDian;
	state.ruleForm.jiuZhenLeiXing = loginInfo.jiuZhenLeiXing;
	state.ruleForm.account = loginInfo.account;

	nextTick(() => {
		state.ruleForm.keShi = loginInfo.keShi;
	});
});

// 页面卸载
onUnmounted(() => {
	// 销毁验证码过期计时器
	clearInterval(timer);
	timer = null;

	document.removeEventListener('keyup', handleKeyPress);
});

// 检测大小写按键
const handleKeyPress = (e: KeyboardEvent) => {
	// const isCapsLockOn = e.getModifierState('CapsLock');
	// state.capsLockVisible = isCapsLockOn;
};

// 获取验证码
const getCaptcha = async () => {
	if (!state.captchaEnabled) return;

	state.ruleForm.code = '';
	var res = await getAPI(SysAuthApi).apiSysAuthCaptchaGet();
	state.captchaImage = 'data:text/html;base64,' + res.data.result?.img;
	state.ruleForm.codeId = res.data.result?.id;
	state.expirySeconds = res.data.result?.expirySeconds;
};

// 登录
const onSignIn = async () => {
	let valid = await ruleFormRef.value.validate();
	if (!valid) return false;

	try {
		state.loading.signIn = true;
		var isSuccess = await doLogin(state.ruleForm, route, router); //登录
		if (!isSuccess) {
			getCaptcha(); // 重新获取验证码
		}
	} finally {
		state.loading.signIn = false;
	}
};

// 打开旋转验证
const openRotateVerify = () => {
	state.rotateVerifyVisible = true;
	state.isPassRotate = false;
	dragRef.value?.reset();
};

// 通过旋转验证
const passRotateVerify = () => {
	state.rotateVerifyVisible = false;
	state.isPassRotate = true;
	onSignIn();
};

// 登录处理
const handleSignIn = () => {
	if (!state.ruleForm.account) {
		accountRef.value?.focus();
	} else if (!state.ruleForm.password) {
		passwordRef.value?.focus();
	} else if (state.captchaEnabled && !state.ruleForm.code) {
		codeRef.value?.focus();
	} else {
		state.secondVerEnabled ? openRotateVerify() : onSignIn();
	}
};

// // 微信登录
// const weixinSignIn = () => {
// 	window.open('http://localhost:5006/api/sysoauth/signin?provider=Gitee&redirectUrl=http://localhost:8888');
// };
</script>

<style lang="scss" scoped>
.dialog-header {
	:deep(.el-dialog) {
		width: unset !important;

		.el-dialog__header {
			display: none;
		}

		.el-dialog__wrapper {
			position: absolute !important;
		}

		.v-modal {
			position: absolute !important;
		}
	}
}

.login-content-form {
	margin-top: 20px;

	@for $i from 0 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;

		&:hover {
			color: #909399;
		}
	}

	.login-content-code {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;

		.login-content-code-img {
			width: 100%;
			height: 40px;
			line-height: 40px;
			background-color: #ffffff;
			border: 1px solid rgb(220, 223, 230);
			cursor: pointer;
			transition: all ease 0.2s;
			border-radius: 4px;
			user-select: none;

			&:hover {
				border-color: #c0c4cc;
				transition: all ease 0.2s;
			}
		}
	}

	.login-content-code-expired {
		@extend .login-content-code;

		&::before {
			content: '验证码已过期';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 0.5);
			color: #ffffff;
			text-align: center;
		}
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}

	.login-msg {
		color: var(--el-text-color-placeholder);
	}
}
</style>
